<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <fieldset>
      <legend>
        Content-Type:application/x-www-form-urlencoded(表单默认类型)
      </legend>
      <form
        action="/post-page"
        method="post"
        enctype="application/x-www-form-urlencoded"
      >
        <div class="form-row">
          <label>
            <span>姓名：</span>
            <input type="text" name="name" id="name" value="林可G" />
          </label>
        </div>
        <div class="form-row">
          <label>
            <span>年龄：</span>
            <input type="number" name="age" id="age" value="18" />
          </label>
        </div>
        <div class="form-row">
          <input type="submit" value="提交" />
        </div>
        <details>
          <summary>请求参数形式</summary>
          <pre>name=%E6%9E%97%E5%8F%AFG&age=18</pre>
        </details>
      </form>
    </fieldset>
    <fieldset>
      <legend>
        Content-Type:multipart/form-data
      </legend>
      <form action="/post-page" method="post" enctype="multipart/form-data">
        <div class="form-row">
          <label>
            <span>姓名：</span>
            <input type="text" name="name" id="name" value="林可G" />
          </label>
        </div>
        <div class="form-row">
          <label>
            <span>年龄：</span>
            <input type="number" name="age" id="age" value="18" />
          </label>
        </div>
        <div class="form-row">
          <input type="submit" value="提交" />
        </div>
        <details>
          <summary>请求参数形式</summary>
          <pre>
------WebKitFormBoundaryLbuBByBRtu9AIwLq
Content-Disposition: form-data; name="name"

林可G
------WebKitFormBoundaryLbuBByBRtu9AIwLq
Content-Disposition: form-data; name="age"

18
------WebKitFormBoundaryLbuBByBRtu9AIwLq--
        </pre
          >
        </details>
      </form>
    </fieldset>

    <fieldset>
      <legend>
        Content-Type:text/plain
      </legend>
      <form action="/post-page" method="POST" enctype="text/plain">
        <div class="form-row">
          <label>
            <span>姓名：</span>
            <input type="text" name="name" id="name" value="林可G" />
          </label>
        </div>
        <div class="form-row">
          <label>
            <span>年龄：</span>
            <input type="number" name="age" id="age" value="18" />
          </label>
        </div>
        <div class="form-row">
          <input type="submit" value="提交"/>
        </div>
        <details>
          <summary>请求参数形式</summary>
          <pre>name=林可G&age=18</pre>
        </details>
      </form>
    </fieldset>
    <script src="index.js"></script>
  </body>
</html>
